<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<select id="menulist">
  <option id="item0">Alicia</option>
  <option id="item1">Peter</option>
  <option id="item2">Kalinda</option>
</select>

<script>
async_test((t) => {
    var menulist = document.getElementById("menulist");
    menulist.selectedIndex = 0;

    var axMenuList = accessibilityController.accessibleElementById("menulist");
    var axMenuListPopup = axMenuList.childAtIndex(0);
    assert_equals(axMenuListPopup.role, "AXRole: AXMenuListPopup");
    var axMenuListOption = axMenuListPopup.childAtIndex(0);
    assert_equals(axMenuListOption.role, "AXRole: AXMenuListOption");

    accessibilityController.addNotificationListener(
        t.step_func(function(element, notification) {
            if (element.name != axMenuListOption.name)
                return;
            window.element = element;
            assert_equals(element.isEqual(axMenuListOption), true);
            assert_equals(element.parentElement(), axMenuListPopup);
            t.done();
        })
    );
    menulist.selectedIndex = 1;
}, "This test makes sure menu lists fire events on both the option that lost selection and the one that gained selection.");

</script>
